<template>
  <div class="modal" @click="closeModal">
    <div
      class="modal-content"
      :style="{ height: modalHeight + 'px' }"
      @click.stop
    >
      <img
        :src="GetHeadImage(currentItem.img)"
        alt="放大图片"
        class="modal-image"
        ref="modalImage"
        @load="setModalHeight"
      />
      <div class="modal-body">
        <div class="user-info">
          <img
            :src="GetHeadImage(currentItem.headImg)"
            alt="用户头像"
            class="avatar"
          />
          <span>{{ currentItem.name }}</span>
          <button
            @click="toggleFollow"
            :class="isFollowing ? 'unfollowed-btn' : 'follow-btn'"
          >
            {{ isFollowing ? "已关注" : "关注" }}
          </button>
        </div>

        <div class="post-details">
          <h2>{{ currentItem.title }}</h2>
          <p class="content-1">{{ currentItem.postContent }}</p>
          <div style="display: flex">
            <p class="timestamp">{{ currentItem.createdAt }}</p>
            <button @click="toggleOption" class="option-button">...</button>
            <div v-if="optionsVisible" class="option-dropdown">
              <button @click="reportPost">举报</button>
            </div>
          </div>
        </div>

        <div class="comments">
          <div
            v-for="(comment, index) in currentItem.comments"
            :key="index"
            class="comment"
          >
            <img
              :src="GetHeadImage(comment.avatar)"
              alt="头像"
              class="avatar"
            />
            <div>
              <div class="comment-username" style="display: flex">
                <p>{{ comment.name }}</p>
                <!-- <div class="options-button">
                  <button
                    @click="toggleOptions"
                  >
                    ...
                  </button>
                </div>

                <div v-if="optionsVisibles" class="options-dropdown">
                  <button @click="reportPost">举报</button>
                </div> -->
              </div>
              <div class="comment-content">{{ comment.content }}</div>
              <div class="comment-time">{{ comment.time }}</div>
              <div class="comment-interactions">
                ❤ {{ comment.likes }} 🗨️ {{ comment.replies }}
              </div>
            </div>
          </div>
        </div>

        <div class="input-area">
          <img :src="currentItem.myAvatar" alt="我的头像" class="avatar" />
          <input
            type="text"
            placeholder="说点什么..."
            v-model="commentInput"
            @keyup.enter="sendComment"
            class="comment-input"
          />
          <button @click="sendComment" class="send-button">发送</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, watch, defineProps } from "vue";
import { defineEmits } from "vue";

const props = defineProps({
  items: {
    type: Array,
    required: true,
  },
  currentItem: {
    type: Object,
    required: true,
  },
});

const emit = defineEmits(["close"]);
const GetHeadImage = (imgsrc) => new URL(imgsrc, import.meta.url).href;
const isFollowing = ref(false);
const commentInput = ref("");
const optionsVisible = ref(false);
const modalHeight = ref(0);

watch(
  () => props.currentItem,
  (newItem) => {
    currentItem.value = newItem; // 当 props.currentItem 更新时，更新 currentItem
  }
);

const closeModal = () => {
  emit("close"); // 发射 close 事件，通知父组件关闭模态
};

const toggleFollow = () => {
  isFollowing.value = !isFollowing.value;
};

const sendComment = () => {
  if (commentInput.value.trim() !== "") {
    const newComment = {
      avatar: "/src/assets/img/my_head.png",
      name: "张包包",
      content: commentInput.value,
      time: new Date().toLocaleTimeString(), // 当前时间
      likes: 0,
      replies: 0,
    };

    emit("update-comments", newComment); // 触发事件并传递新评论
    commentInput.value = ""; // 清空输入框
  }
};

// 获取图片高度，动态调整模态框高度
const modalImage = ref(null);
const setModalHeight = () => {
  if (modalImage.value) {
    const imageHeight = modalImage.value.naturalHeight;

    // 定义高度范围
    const minHeight = 400;
    const maxHeight = 600;

    // 根据图片高度计算弹窗高度
    if (imageHeight < minHeight) {
      modalHeight.value = minHeight;
    } else if (imageHeight > maxHeight) {
      modalHeight.value = maxHeight;
    } else {
      modalHeight.value = imageHeight;
    }
  }
};
const toggleOption = () => {
  optionsVisible.value = !optionsVisible.value;
};
//聊天区评论举报下拉框
const optionsVisibles = ref([false]);
const toggleOptions = (index) => {
  optionsVisibles.value[index] = !optionsVisibles.value[index];
};

//举报评论功能

const reportPost = () => {
  console.log("举报此帖子");
};
</script>

<style scoped>
.modal {
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  justify-content: center;
  align-items: center;
  z-index: 800;
}

@keyframes scaleUp {
  to {
    transform: scale(1); /* 最终缩放为 1 */
  }
}

.modal-content {
  background-color: #fff;
  position: relative;
  transform: scale(0); /* 初始缩放为 0 */
  animation: scaleUp 0.5s forwards;

  border-radius: 20px;

  display: flex;

  max-height: 600px;
  min-height: 200px;
  max-width: 70%;
}

.modal-image {
  /* max-width: 60%; */
  height: auto;
  border-radius: 20px;
}

.modal-body {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  padding: 0 10px 5px 0;
}

.user-info,
.post-details {
  margin-bottom: 10px;
}
.post-details h2 {
  font-weight: 600;
}

.user-info {
  display: flex;
  margin: 10px;
}

.user-info span {
  flex: 1;
  display: flex;
  align-items: center;
  font-size: 16px;
}

.user-info button {
  font-size: 16px;
  padding: 0px 24px;
  height: 40px;
  border-radius: 20px;
  border: 1px solid rgba(0, 0, 0, 0.5);
  font-weight: 600;
}

.unfollowed-btn {
  background-color: #fff;
  color: #333333cc;
}
.follow-btn {
  background-color: #ff2e4d;
  color: white;
}

.isfollowing {
  background-color: white;
  color: black;
  transition: background-color 2s;
}

.timestamp {
  flex: 1;
}

.option-button {
  position: relative;
  float: left;
  border: 0;
  background-color: #fff;
}

.option-dropdown {
  position: absolute;
  background-color: #fff;
  border: 1px solid #ccc;
  padding: 10px 10px;
  z-index: 800;
  width: 80px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  right: -21px;
  top: calc(31% + 5px);
}

.options-dropdown {
  position: relative;
  background: white;
  border: 1px solid #ccc;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  margin-top: 22px;
  left: 212px;
  border-radius: 9px;
  padding: 5px;
  z-index: 10;
}

.comment-username{
  width: inherit;
  height: 40px;
}

.comment-username p{
  flex: 1;
  
}
.options-button {
  position: relative;
  border: 0;
}

.option-dropdown button {
  font-size: 16px;
}

.comments {
  flex: 1;
  height: inherit;
  overflow-y: auto;

  background-color: #f9f9f9;
  scrollbar-width: none;
  padding: 0 10px;
}

.comment {
  display: flex;
  margin-bottom: 10px;
}

.comment-content,
.content-1 {
  display: -webkit-box;
  -webkit-box-orient: vertical; /* 设置方向为纵向 */
  -webkit-line-clamp: 3;
  overflow: hidden;
  text-overflow: ellipsis;
  max-height: 4.5em;
  line-height: 1.5em;
}

.input-area {
  margin-top: auto;
  display: flex;
  align-items: center;
  position: relative;
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.comment-input {
  flex: 1;
  padding: 5px;
  margin-left: 10px;
}

.send-button {
  margin-left: 10px;
  border: 0;
  padding: 10px;
  border-radius: 10px;
}
</style>
